<template>
    <div>
        <h4>基础篇-数据只读</h4>
        <div><b>readonly：</b>{{ message }} / {{ user.name }} / {{ user.age }}</div>
        <button @click="ReadonlyChange">修改 readonly 管理的数据</button>
    </div>
</template>

<script setup>
import { readonly } from 'vue';

/**
 * 数据的只读
 * 【说明】：readonly() 返回一个原始对象的只读代理对象、就是这个函数管理的数据只能读、不能修改
 */
let message = readonly("Hello")
let user = readonly({ name: "hanmeimei", age: 24 })


const ReadonlyChange = () => {
    // 不能修改，只能读取
    user.name = ""
    user.age = 0
    message = "readonly"
}
</script>

<style></style>